<template>
  <div id="contentBox">
    <div class="mainBox">
      <div class="groupActivities">
        <p>{{`拼团活动漏斗转换 ( ${startTime} ~ ${endTime} )`}}</p>
        <div class="moneyInfo">
          <div class="peopleCount">
            <span>1.浏览拼团活动详情页</span>
            <span>{{DataInfo.viewSum}}人</span>
          </div>
          <el-progress :text-inside="true" :stroke-width="15" :format="format" :percentage="100"></el-progress>
        </div>
        <div class="moneyInfo" v-if="isDeposite">
          <div class="peopleCount" >
            <span>2.支付定金</span>
            <span>{{DataInfo.depositSum}}人</span>
          </div>
          <el-progress :text-inside="true" :stroke-width="15" :percentage="preDep"></el-progress>
        </div>
        <div class="moneyInfo" v-if="isDeposite">
          <div class="peopleCount">
            <span>3.支付尾款</span>
            <span>{{DataInfo.balanceSum}}人</span>
          </div>
          <el-progress :text-inside="true" :stroke-width="15" :percentage="preBal"></el-progress>
        </div>
        <div class="moneyInfo" v-if="!isDeposite">
          <div class="peopleCount">
            <span>2.拼团成功</span>
            <span>{{DataInfo.fullPaymentSum}}人</span>
          </div>
          <el-progress :text-inside="true" :stroke-width="15" :percentage="preSuc"></el-progress>
        </div>
      </div>
      <div id="main"></div>
    </div>
    <div class="secondBox">
      <div class="groupActivities">
        <p>{{`流水数据 ( ${startTime} ~ ${endTime} )`}}</p>
        <el-table
          :data="listData"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :element-loading-text="global.loadingStr"
          :header-cell-style="{background:global.mainColor}"
        >
          <el-table-column prop="title" label="指标" align="center">
            <template></template>
          </el-table-column>
          <el-table-column prop="total" label="合计" align="center">
            <template></template>
          </el-table-column>
        </el-table>
      </div>
      <div id="secondEchart"></div>
    </div>
    <div id="thirdBox"></div>
  </div>
</template>

<script>
import * as Group from "@/api/group";
export default {
  name: "DataInfo",
  data() {
    return {
      listData: [],
      DataInfo: {},
      startTime: "",
      endTime: "",
      shareData: [], //分享
      groupData: [], //成团
      joinData: [], //参与
      seriesData: [], //每日
      partakeGroupVOS: [],
      dataXAxis: [], //x轴数据
      preVie:0,
      preDep:0,
      preBal:0,
      preSuc:0,
      isDeposite:false
    };
  },
  created() {
    this.getList(this.$route.query.id);
  },
  mounted() {},
  methods: {
    getList(id) {
      Group.getDataInfo({ id }).then((res) => {
        this.DataInfo = res.data;
        this.preVie=this.DataInfo.viewSum/100
        if(this.DataInfo.depositSum==0){
          this.preDep=0
          this.isDeposite=false
        }else{
          this.preDep=Math.floor((this.DataInfo.depositSum/this.DataInfo.viewSum).toFixed(2)*100)
          this.isDeposite=true
        }
        if(this.DataInfo.depositSum==0){
           this.preBal=0
           this.isDeposite=false
        }else{
          this.preBal=Math.floor((this.DataInfo.balanceSum/this.DataInfo.depositSum).toFixed(2)*100)
          this.isDeposite=true
        }
        if(this.DataInfo.viewSum==0){
          this.preSuc=0
        }else{
          this.preSuc=Math.floor((this.DataInfo.fullPaymentSum/this.DataInfo.viewSum).toFixed(2)*100)
        }
        // if(this.DataInfo.fullPaymentSum==0){

        // }
        this.listData = [
          {
            title: "销售总额（¥）",
            total: res.data.sale == null ? 0 : res.data.sale,
          },
          {
            title: "订单数",
            total: res.data.orderSum == null ? 0 : res.data.orderSum,
          },
          {
            title: "退款金额",
            total: res.data.refund == null ? 0 : res.data.refund,
          },
        ];
        // 时间
        this.startTime = this.dateChange(res.data.timeAxis[0]);
        this.endTime = this.dateChange( res.data.timeAxis[res.data.timeAxis.length - 1]);
        res.data.timeAxis.forEach((item) => {
          this.dataXAxis.push(this.dateChange(item));
        });

        // 分享
        this.shareData = res.data.shareSum;
        // this.shareData = [10, 20];

        // 成团/参与人数
        this.partakeGroupVOS = res.data.partakeGroupVOS;
        // this.joinData = [10, 20];
        // this.groupData = [30, 50];
        res.data.partakeGroupVOS.forEach((item) => {
          this.joinData.push(item.partakeSum);
          this.groupData.push(item.groupSum);
        });
        console.log(this.joinData);

        // 每日成交
        this.seriesData = res.data.amountList;
        // this.seriesData = [10, 20];

        this.drawChart();
        this.drawTwoChart();
        this.drawThirdChart();
      });
    },
    // 时间戳转换成日期
    dateChange(date) {
      var str = "" + date;
      var s1 = str.substring(0, str.length);
      let d = new Date(+s1);
      let yyyy = d.getFullYear() + "-";
      let MM =
        (d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1) +
        "-";
      let dd = d.getDate() + " ";
      return yyyy + MM + dd;
    },
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "活动分享次数趋势图",
          left: "center",
        },
        tooltip: {},
        legend: {
          data: ["每日分享次数总数"],
          left: 50,
        },
        xAxis: {
          type: "category",
          // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          // data: ["2020-08-22", "2020-08-23"],
          data: this.dataXAxis,
        },
        yAxis: {
          type: "value",
        },
        grid: {
          x: 50,
          y: 25,
          x2: 25,
          y2: 25,
        },
        series: [
          {
            name: "每日分享次数总数",
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            // data: [820, 932],
            data: this.shareData,
            type: "line",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    drawTwoChart() {
      // 基于准备好的dom，初始化echarts实例
      var mySecChart = echarts.init(document.getElementById("secondEchart"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "活动参与人数、成团人数趋势图",
          left: "center",
        },
        tooltip: {},
        legend: {
          data: ["成团人数", "参与人数"],
          left: 50,
        },
        xAxis: {
          type: "category",
          // data: ["2/1", "2/2", "2/3", "2/4", "2/5", "2/6", "2/7"],
          data: this.dataXAxis,
        },
        yAxis: {
          type: "value",
          // data: ["0", "20", "40", "60", "80", "100", "200"],
        },
        grid: {
          x: 50,
          y: 25,
          x2: 25,
          y2: 25,
        },
        series: [
          {
            name: "成团人数",
            type: "line",
            // data: [120, 132, 101, 134, 90, 230, 210],
            data: this.groupData,
          },
          {
            name: "参与人数",
            type: "line",
            // stack: "总量",
            // data: [220, 182, 191, 234, 290, 330, 310],
            data: this.joinData,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      mySecChart.setOption(option);
      window.addEventListener("resize", function () {
        mySecChart.resize();
      });
    },
    drawThirdChart() {
      // 基于准备好的dom，初始化echarts实例
      var myThirdChart = echarts.init(document.getElementById("thirdBox"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "活动成交金额趋势图",
          left: "center",
        },
        tooltip: {},
        xAxis: {
          type: "category",
          // data: ["1月","2月","3月","4月","5月","6月","7月", "8月","9月","10月","11月","12月",],
          data: this.dataXAxis,
        },
        yAxis: {
          type: "value",
        },
        grid: {
          x: 50,
          y: 25,
          x2: 25,
          y2: 25,
        },
        legend: {
          data: ["每日成交金额总数"],
          left: 100,
        },
        series: [
          {
            name: "每日成交金额总数",
            data: this.seriesData,
            type: "bar",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myThirdChart.setOption(option);
      window.addEventListener("resize", function () {
        myThirdChart.resize();
      });
    },
    
     format(percentage) {
        return percentage === 100 ? '' : `${percentage}%`;
      }
  },
};
</script>

<style lang='scss' scoped>
#contentBox {
  padding: 30px;
  p {
    text-align: center;
    margin: 0.1rem /* 10/100 */ 0 0.1rem /* 10/100 */ 0;
    font-size: 18px /* 22/100 */ /* 20/100 */;
    // font-weight: 500;
  }
  .mainBox,
  .secondBox {
    display: flex;
    margin-bottom: 15px;
    width: 100%;
    #main,
    #secondEchart,
    #thirdBox {
      //   flex: 1;
      width: 100%;
      margin-left: 20px;
      border: 1px solid rgba($color: #000000, $alpha: 0.2);
      box-shadow: 10px 10px 12px -9px rgba($color: #000000, $alpha: 0.5);
      border-radius: 5px;
    }
  }
  .groupActivities {
    padding: 0 15px;
    min-width: 500px;
    min-height: 240px;
    border: 1px solid rgba($color: #000000, $alpha: 0.2);
    box-shadow: 10px 10px 12px -9px rgba($color: #000000, $alpha: 0.5);
    border-radius: 5px;
    .moneyInfo {
      margin: 27px 0;
      .peopleCount {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
      }
    }
  }
  #thirdBox {
    width: 100%;
    min-height: 230px;
    border: 1px solid rgba($color: #000000, $alpha: 0.2);
    box-shadow: 10px 10px 12px -9px rgba($color: #000000, $alpha: 0.5);
    border-radius: 5px;
  }
}
</style>